<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jstl/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:converge="http://com.interactivemediamanagement.converge/tags">

    <c:if test="#{newsItem.fieldVisible['MEDIA']}">

        <converge:moduleHeader moduleTitle="#{msgs.newsitem_MEDIA_FILES}" />
        <div class="moduleContent">

            <h:panelGrid columns="2" columnClasses="left, right" style="width: 100%" rendered="#{newsItem.currentActor &amp;&amp; !newsItem.readOnly}">
                <h:outputText value="" />
                <a4j:commandButton styleClass="button mediumButton" value="Attach" ajaxSingle="true" actionListener="#{newsItem.onPreAttachMediaFile}">
                    <rich:componentControl for="mpMediaFileUpload" operation="show" event="onclick" />
                </a4j:commandButton>
            </h:panelGrid>

            <rich:dataTable id="dtMediaFiles" value="#{value.selectedNewsItem.mediaAttachments}" var="attachment" styleClass="table" headerClass="tableHeader" rowClasses="odd, even">

                <rich:column styleClass="center">
                    <h:outputLink value="#{attachment.mediaItem.absoluteFilename}" target="_blank">
                        <h:outputText value="Get file" rendered="#{!attachment.mediaItem.thumbAvailable}" />
                        <h:graphicImage url="#{attachment.mediaItem.thumbURL}" rendered="#{attachment.mediaItem.thumbAvailable}" />
                    </h:outputLink>
                </rich:column>

                <rich:column styleClass="left">
                    <h:outputText value="#{attachment.caption}" />
                </rich:column>

                <rich:column styleClass="center columnIcon">
                    <a4j:commandLink ajaxSingle="true" reRender="pgMediaItemSelected">
                        <rich:componentControl for="mpMediaItemSelected" operation="show" event="oncomplete" />
                        <f:setPropertyActionListener  target="#{newsItem.selectedAttachment}" value="#{attachment}" />
                        <h:graphicImage value="#{res.UPDATE_ICON}" alt="#{msgs.UPDATE}" title="#{msgs.UPDATE}" />
                    </a4j:commandLink>
                </rich:column>

                <rich:column styleClass="center columnIcon">
                    <a4j:commandLink onclick="if (confirm('#{msgs.newsitem_CONFIRM_REMOVE_ATTACHMENT}') != true){ return false; };" ajaxSingle="true" reRender="dtMediaFiles">
                        <f:setPropertyActionListener target="#{newsItem.deleteMediaItem}" value="#{attachment}" />
                        <h:graphicImage value="#{res.DELETE_ICON}" alt="#{msgs.DELETE}" title="#{msgs.DELETE}" />
                    </a4j:commandLink>
                </rich:column>
            </rich:dataTable>

        </div>
        <div style="clear: both; padding-bottom: 12px;"></div>

        <a4j:region id="regMediaFileUpload">
            <rich:modalPanel id="mpMediaFileUpload" autosized="true" domElementAttachment="parent">
                <f:facet name="header">
                    <h:panelGroup>
                        <h:outputText value="#{msgs.newsitem_MEDIA_ATTACHMENT_DETAILS}"></h:outputText>
                    </h:panelGroup>
                </f:facet>
                <f:facet name="controls">
                    <h:panelGroup>
                        <h:graphicImage id="imgCloseMediaAttachmentDetails" value="#{res.DIALOGUE_CLOSE_ICON}" styleClass="link" />
                        <rich:componentControl for="mpMediaFileUpload" attachTo="imgCloseMediaAttachmentDetails" operation="hide" event="onclick" />
                    </h:panelGroup>
                </f:facet>

                <h:panelGrid style="width: 480px;">
                    <rich:tabPanel id="tpMediaFileUpload" switchType="client" activeTabClass="tabActive" inactiveTabClass="tabInactive">

                        <rich:tab label="#{msgs.SEARCH}">
                            <h:panelGrid columnClasses="tabSheet" styleClass="tabSheetGrid">
                                <h:panelGroup>
                                    <h:inputText id="txtSearchKeyword" styleClass="text" value="#{value.keyword}" title="Free-text" style="width: 350px;" />
                                    <a4j:commandButton type="submit" styleClass="button dynamicButton" style="margin-left: 10px;" value="#{msgs.search_SEARCH}" actionListener="#{value.onSearch}" reRender="pgResults" />
                                </h:panelGroup>

                                <h:panelGroup id="pgResults" layout="block" styleClass="scrollableContent">
                                    <h:outputFormat value="#{msgs.search_X_RESULTS_FOUND}" rendered="#{value.searchResults.rowCount &gt; -1}">
                                        <f:param value="#{newsItem.lastSearch.numberOfResults}" />
                                        <f:param value="#{newsItem.lastSearch.searchTimeInSeconds}" />
                                        <f:param value="#{newsItem.lastSearch.numberOfPages}" />
                                    </h:outputFormat>

                                    <rich:dataTable id="searchResults" rows="50" value="#{value.searchResults}" var="item">

                                        <rich:column>


                                            <h:panelGrid>
                                                <h:outputText value="#{item.title}" escape="false" styleClass="bold" />
                                                <h:column>
                                                    <h:graphicImage url="#{item.previewLink}" rendered="#{item.preview}" styleClass="searchResultThumb" />
                                                    <h:outputText value="#{item.description}" escape="false" /><br/>
                                                    <span class="searchResultDescription">#{item.note}</span><br/>
                                                    <span class="searchResultDate">#{msgs.DATE}:&#160;
                                                        <h:outputText value="#{item.date.time}" rendered="#{item.date != null}">
                                                            <f:convertDateTime pattern="#{msgs.FORMAT_DATE}" timeZone="#{userSession.user.timeZone}" />
                                                        </h:outputText>
                                                        <h:outputText value="#{msgs.UNKNOWN}" rendered="#{item.date == null}" />
                                                    </span>
                                                </h:column>

                                            </h:panelGrid>
                                        </rich:column>

                                        <rich:column>
                                            <a4j:commandButton styleClass="button dynamicButton" value="#{msgs.SELECT}" reRender="pgMediaItemSelected" ajaxSingle="true">
                                                <f:setPropertyActionListener target="#{newsItem.selectedMediaItemId}" value="#{item.id}" />
                                                <rich:componentControl for="mpMediaItemSelected" operation="show" event="oncomplete" />
                                            </a4j:commandButton>
                                        </rich:column>

                                    </rich:dataTable>

                                </h:panelGroup>
                            </h:panelGrid>
                        </rich:tab>
                    </rich:tabPanel>

                    <h:panelGroup styleClass="dialogueButtons">
                        <h:commandLink id="lnkCloseMediaAttachmentDetails" styleClass="dialogButton" value="#{msgs.CLOSE}" onclick="#{rich:component('mpMediaFileUpload')}.hide(); return false;" />
                    </h:panelGroup>
                </h:panelGrid>

            </rich:modalPanel>

            <h:panelGroup id="pgMediaItemSelected">
                <rich:modalPanel id="mpMediaItemSelected" autosized="true" domElementAttachment="parent" rendered="#{newsItem.selectedAttachment != null}">
                    <f:facet name="header">
                        <h:panelGroup>
                            <h:outputText value="#{msgs.newsitem_MEDIA_ATTACHMENT_DETAILS}"></h:outputText>
                        </h:panelGroup>
                    </f:facet>
                    <f:facet name="controls">
                        <h:panelGroup>
                            <h:graphicImage id="imgCloseMediaItemSelected" value="#{res.DIALOGUE_CLOSE_ICON}" styleClass="link" />
                            <rich:componentControl for="mpMediaItemSelected" attachTo="imgCloseMediaItemSelected" operation="hide" event="onclick" />
                        </h:panelGroup>

                    </f:facet>

                    <h:panelGrid style="width: 480px;">
                        <rich:tabPanel id="tpMediaItemSelected" switchType="client" activeTabClass="tabActive" inactiveTabClass="tabInactive">
                            <rich:tab label="Selected Item">
                                <h:panelGrid columnClasses="tabSheet center" styleClass="tabSheetGrid">
                                    <h:outputLink target="_blank" value="#{newsItem.selectedAttachment.mediaItem.absoluteFilename}">
                                        <h:outputText rendered="#{!newsItem.selectedAttachment.mediaItem.thumbAvailable}" value="#{newsItem.selectedAttachment.mediaItem.title}" />
                                        <h:graphicImage style="border: 1px solid #aaaaaa;" url="#{newsItem.selectedAttachment.mediaItem.thumbURL}" rendered="#{newsItem.selectedAttachment.mediaItem.thumbAvailable}" title="#{newsItem.selectedAttachment.mediaItem.title}" />
                                    </h:outputLink>

                                    <h:inputTextarea id="txtCaption" value="#{newsItem.selectedAttachment.caption}" style="width: 98%; height: 100px; margin-left: 1%; margin-right: 1%" styleClass="text mediumInput" />

                                </h:panelGrid>
                            </rich:tab>
                        </rich:tabPanel>

                        <h:panelGroup styleClass="dialogueButtons">
                            <a4j:commandLink id="lnkUpdateAttachment" actionListener="#{newsItem.onUpdateAttachment}" styleClass="dialogButton" value="#{msgs.UPDATE}" reRender="dtMediaFiles" rendered="#{newsItem.selectedAttachment.id != null}">
                                <rich:componentControl for="mpMediaItemSelected" operation="hide" event="oncomplete" />
                            </a4j:commandLink>
                            <a4j:commandLink id="lnkUseAttachment" actionListener="#{newsItem.onUseAttachment}" styleClass="dialogButton" value="#{msgs.ADD}" reRender="dtMediaFiles" rendered="#{newsItem.selectedAttachment.id == null}">
                                <rich:componentControl for="mpMediaItemSelected" operation="hide" event="oncomplete" />
                            </a4j:commandLink>
                            <h:commandLink id="lnkCloseMediaItemSelection" styleClass="dialogButton" value="#{msgs.CANCEL}" onclick="#{rich:component('mpMediaItemSelected')}.hide(); return false;" />
                        </h:panelGroup>
                    </h:panelGrid>

                </rich:modalPanel>
            </h:panelGroup>

        </a4j:region>
    </c:if>

</ui:composition>